<template>
  <div v-show="$route.name === 'material-allocation-check'">
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/apply-list' }">申请记录</el-breadcrumb-item>
      <el-breadcrumb-item>调拨物资详情</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域--订单数据修改 -->
    <el-card>
      <div style="margin-bottom: 20px;">调拨物资详情</div>
      <el-form>
        <el-row>
          <el-col :span="6">
            <el-form-item label="调拨时间">
              <el-date-picker type="date" placeholder="选择日期" v-model="allocation_time" readonly></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="申请门店">
              <el-input v-model="base_to_name" style="width:200px;margin-left: 10px;" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="调拨门店">
              <el-input v-model="base_from_name" style="width:200px;margin-left: 10px;" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="调拨编号">
              <el-input v-model="apply_number" style="width:200px;margin-left: 10px;" readonly></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table
        border
        v-loading="loading"
        :data="allocation"
        style="margin-top: 10px;">
        <el-table-column type="index" width="60" align="center"></el-table-column>
        <el-table-column label="分类" prop="category_name" min-width="130" align="center"></el-table-column>
        <el-table-column label="商品" prop="name" min-width="130" align="center"></el-table-column>
        <el-table-column label="调拨数量" min-width="80" align="center">
          <template slot-scope="scope">
            <span>{{ parseFloat(scope.row.count).toFixed(2) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="备注" prop="comment" min-width="180" align="center"></el-table-column>
      </el-table>
      <el-row>
        <el-col :span="24">
          <el-button type="success" @click="handleCheck(1)" style="margin-top: 10px;">通过</el-button>
          <el-button type="danger" @click="handleCheck(0)">驳回</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-button  @click="back" style="margin-top: 10px;">返回</el-button>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loading: false,
      allocate_id: '',
      allocation: [],
      allocation_time: '',
      base_to_name: '',
      apply_number: '',
      come: '',
      base_from_name: ''
    }
  },
  mounted() {
    this.getAllocateData()
  },
  methods: {
    getAllocateData() {
      if (this.$route.params.allocate_id) {
        this.allocate_id = this.$route.params.allocate_id
        localStorage.setItem('allocateId', this.$route.params.allocate_id)
      } else {
        this.allocate_id = localStorage.getItem('allocateId')
      }
      if (this.allocate_id) {
        this.getAllocateDetail(this.allocate_id)
      }
    },
    async getAllocateDetail(allocate_id) {
      this.loading = true
      const { data: result } = await this.$http.get('/allocation/' + allocate_id)
      if (result.status !== 200) {
        this.loading = false
        return this.$message.error(result.msg)
      }
      this.loading = false
      this.allocation = result.data.detail
      this.allocation_time = result.data.allocation_time
      this.base_to_name = result.data.base_to_name
      this.base_from_name = result.data.base_from_name
      this.apply_number = result.data.apply_number
    },
    back () {
      localStorage.removeItem('allocateId')
      this.$router.push({ 
        'name': 'apply-list',
        'params': { tab: 'third'}
      })
    },
    async handleCheck(check) {
      if(!check) {
        this.$prompt('请输入驳回信息', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then( async ({ value }) => {
          const params = {
            allocate_id: this.allocate_id,
            check: check,
            comment: value
          }
          const { data: result } = await this.$http.put('/allocation/check', params)
          if (result.status !== 200) {
            return this.$message.error(result.msg)
          }
          this.$message.success('审批成功')
          this.$router.push({ 
            'name': 'apply-list', 
            'params': { tab: 'third' } 
          })
        })
      } else {
        const params = {
          allocate_id: this.allocate_id,
          check: check
        }
        const { data: result } = await this.$http.put('/allocation/check', params)
        if (result.status !== 200) {
          return this.$message.error(result.msg)
        }
        this.$message.success('审批成功')
        this.$router.push({ name: 'apply-list', 'params': { tab: 'third'} })    
      }
    }
  }
}
</script>